<template>
  <div class="login container">
    <Header><span>验证码登录/注册</span></Header>
    <section>
        <div class="login-tel">                                          <!-- pattern显示纯数字 -->                
          <input type="text" v-model="userTel" placeholder="请输入手机号" pattern="[0-9]">
        </div>
        <div class="login-code">                           <!-- pattern显示纯数字 -->
          <input type="text" placeholder="请输入短信验证码" pattern="[0-9]*" v-model="userCode">
          <button 
          @click="sendCode"
          :disabled="disabled"
          >{{codeMsg}}</button>
        </div>
        <div class="login-btn" @click="login">登录</div>
        <div class="tab">
          <span @click="goUserLogin">密码登录</span>
          <span @click="Register">快速注册</span>
        </div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from '@/components/common/Tabbar.vue'
import Header from './Header.vue'
import { Toast } from 'mint-ui';
import http from '@/common/api/request.js'
import { mapMutations } from 'vuex';
export default {
  data() {
    return {
      codeNum: 6,
      codeMsg: '获取短信验证码',
      disabled: false,
      code: '',
      userCode: '',
      userTel:'',//用户输入的手机号
      //验证规则
			rules:{//手机号验证
				userTel:{
					rule:/^1[23456789]\d{9}$/,
					msg:'手机号不能为空,并且是11位数字'
				}
			}
    }
  },
    components: {
        Tabbar,
        Header
    },
    methods: {
      ...mapMutations(['USER_LOGIN']),
      // 点击获取短信验证码按钮
      sendCode() {
        // 验证
        if( !this.validate('userTel') ) return;


        // 请求验证码接口
        //发送请求，后端验证
        http.$axios({
          url:'/api/code',
          method:'POST',
          data:{
            phone: this.userTel
          }
        }).then(res=>{
          // console.log(res)
          if(res.success) {
            this.code = res.data
          }
        })

        //禁用按钮
        this.disabled = true
        // 倒计时
        let timer = setInterval(() => {
          // 让他减减 --this.codeNum
          --this.codeNum
          this.codeMsg = `重新发送${this.codeNum}`
        }, 1000)
        // 判断什么时候停止定时器
        setTimeout(() => {
          clearInterval(timer)
          this.codeNum = 6
          this.disabled = false
          this.codeMsg = '获取短信验证码'
        }, 6000)

      },
      //验证信息提示
      validate( key ){
        let bool = true;
        if( !this.rules[key].rule.test( this[key])  ){
          //提示信息
          Toast(this.rules[key].msg);
          bool = false;
          return false;
        }
        return bool;
      },
      //点击登录
      login() {
          if(this.code == this.userCode) {
            //用户输入的证明短信验证码是正确的
            //发送请求

              http.$axios({
              url:'/api/addUser',
              method:'POST',
              data:{
                phone: this.userTel
              }
              }).then(res=>{
              console.log(res,'00000')
              // if(res.success) {
                if(!res.success) return
                //登录成功 ==》跳转页面，存储用户信息
                // console.log(res.data)
                this.USER_LOGIN(res.data,'000000')
                this.$router.push({path: '/my'})
              // }
            })
            
          }

      },
      // 注册
      Register() {
        this.$router.push('/Register')
      },
      // 密码登录
      goUserLogin() {
        this.$router.push('/goUserLogin')
      }
    }
}
</script>

<style scoped>
  section {
    font-size: .24rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #F4F4F4;
  }
  section div {
    margin: .3rem 0;
    width: 8.9rem;
    height: .88rem;
  }
  section input {
    box-sizing: border-box;
    border-radius: .12rem;
    padding: 0 .2rem;
    line-height: .88rem;
    background-color: #FFF;
    border: 1px solid #CCC;
  }
  section .login-tel input {
    width: 8.9rem;
  }
  section .login-tel {
    margin-top: .6rem;
  }
  .login-code {
    display: flex;
  }
  .login-code input {
    border-radius: 0;
    flex: 1;
  }
  .login-code button {
    padding: 0 .4rem;
    line-height: .88rem;
    background-color: #b0352f;
    border: 0;
    color: #FFF;
    border-radius: .12rem;
  }
  .login-btn {
    line-height: .88rem;
    background-color: #b0352f;
    text-align: center;
    border-radius: .12rem;
    color: #FFF;
    font-size: .6rem;
    padding: .1rem 0;
  }
  .tab {
    display: flex;
    justify-content: space-between;
    font-size: .4rem;
  }
</style>